<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SpaceMax | Multi Purpose HTML Template</title>

<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">

<link href="fonts/sfuidisplay.css" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<link rel="stylesheet" href="css/plugins.min.css">

<link rel="stylesheet" href="css/app.css">

<link rel="stylesheet" href="css/custom.css">
</head>
<body class="theme-fern" data-spy="scroll" data-target="#navbar-nav" data-animation="false" data-appearance="light">

<div class="switcher">
<div class="switcher__toggler d-flex flex-column align-items-center justify-content-center">
<button class="toggler__btn mb-1">
<img src="demo-assets/settings.png" alt="settings">
</button>
</div>
<div class="switcher-wrapper">

<div class="switcher-colors switcher-clone">
<h4 class="switcher__item-title">Change the color style</h4>
<ul class="switcher-tab">
<li class="switcher-tab__item">
<button class="tab-color active">Solid Colors</button>
</li>
<li class="switcher-tab__item">
<button class="tab-gradient">Gradient Colors</button>
</li>
</ul>
<div class="switcher-tab-content switcher-tab__color">
<ul class="switcher-color tab-color-clone active">
<li>
<button data-theme="theme-royal-blue" class="controller theme-royal-blue"></button>
</li>
<li>
<button data-theme="theme-blue" class="controller theme-blue"></button>
</li>
<li>
<button data-theme="theme-amethyst" class="controller theme-amethyst"></button>
</li>
<li>
<button data-theme="theme-roman" class="controller theme-roman"></button>
</li>
<li>
<button data-theme="theme-amaranth" class="controller theme-amaranth"></button>
</li>
<li>
<button data-theme="theme-orange" class="controller theme-orange"></button>
</li>
<li>
<button data-theme="theme-green" class="controller theme-green"></button>
</li>
<li>
<button data-theme="theme-fern" class="controller theme-fern active"></button>
</li>
</ul>
<ul class="switcher-gradient tab-color-clone">
<li>
<button data-theme="theme-gradient-1" class="controller bg-gradient--1"></button>
</li>
<li>
<button data-theme="theme-gradient-2" class="controller bg-gradient--2"></button>
</li>
<li>
<button data-theme="theme-gradient-3" class="controller bg-gradient--3"></button>
</li>
<li>
<button data-theme="theme-gradient-4" class="controller bg-gradient--4"></button>
</li>
<li>
 <button data-theme="theme-gradient-5" class="controller bg-gradient--5"></button>
</li>
<li>
<button data-theme="theme-gradient-6" class="controller bg-gradient--6"></button>
</li>
<li>
<button data-theme="theme-gradient-7" class="controller bg-gradient--7"></button>
</li>
<li>
<button data-theme="theme-gradient-8" class="controller bg-gradient--8"></button>
</li>
</ul>
</div>
</div>


<div class="canvas-style switcher-clone">
<h4 class="switcher__item-title">Canvas style</h4>
<ul class="switcher-tab">
<li class="switcher-tab__item">
<button class="tab-full active">Full </button>
</li>
<li class="switcher-tab__item">
<button class="tab-boxed">Boxed</button>
</li>
</ul>
<div class="switcher-tab-content switcher-tab__pattern">
<ul class="switcher-boxed">
<li>
<button data-theme="circle-pattern" class="pcontroller circle-pattern">
<img class="media__content" src="img/patterns/circle-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="circles-light" class="pcontroller circles-light">
<img class="media__content" src="img/patterns/circles-light.png" alt="">
</button>
</li>
<li>
<button data-theme="leaf-pattern" class="pcontroller leaf-pattern">
<img class="media__content" src="img/patterns/leaf-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="memphis-colorful" class="pcontroller memphis-colorful">
<img class="media__content" src="img/patterns/memphis-colorful.png" alt="">
</button>
</li>
<li>
<button data-theme="round-pattern" class="pcontroller round-pattern">
<img class="media__content" src="img/patterns/round-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="spiration-light" class="pcontroller spiration-light">
<img class="media__content" src="img/patterns/spiration-light.png" alt="">
</button>
</li>
<li>
<button data-theme="swirl-pattern" class="pcontroller swirl-pattern">
<img class="media__content" src="img/patterns/swirl-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="tic-tac-toe" class="pcontroller tic-tac-toe">
<img class="media__content" src="img/patterns/tic-tac-toe.png" alt="">
</button>
</li>
<li>
<button data-theme="x-pattern" class="pcontroller x-pattern">
<img class="media__content" src="img/patterns/x-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="hexagon" class="pcontroller hexagon">
<img class="media__content" src="img/patterns/hexagon.png" alt="">
</button>
</li>
<li>
<button data-theme="curls" class="pcontroller curls">
<img class="media__content" src="img/patterns/curls.png" alt="">
</button>
</li>
<li>
<button data-theme="darkness" class="pcontroller darkness">
<img class="media__content" src="img/patterns/darkness.png" alt="">
</button>
</li>
<li>
<button data-theme="spiration-dark" class="pcontroller spiration-dark">
<img class="media__content" src="img/patterns/spiration-dark.png" alt="">
</button>
</li>
<li>
<button data-theme="zig-zag-wool" class="pcontroller zig-zag-wool">
<img class="media__content" src="img/patterns/zig-zag-wool.png" alt="">
</button>
</li>
</ul>
</div>
</div>


<div class="theme-variation switcher-clone">
<h4 class="switcher__item-title">Landing Pages</h4>
<div class="switcher-tab-content switcher-tab__variation">
<div class="demo-item active">
<a href="index.html"><img src="demo-assets/home-1.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-2.html"><img src="demo-assets/home-2.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-3.html"><img src="demo-assets/home-3.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-4.html"><img src="demo-assets/home-4.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-5.html"><img src="demo-assets/home-5.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

</div>
</div>

</div>
</div>


<div class="preloader">
<div class="wrapper">
<div class="blobs">
<div class="blob-center"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
<div>
<div class="loader-canvas canvas-left"></div>
<div class="loader-canvas canvas-right"></div>
</div>
</div>
</div>

<main class="main">

<header class="navbar navbar-sticky navbar-expand-lg navbar-light">
<div class="container position-relative">
<a class="navbar-brand" href="index.html">
<img class="navbar-brand__regular" src="img/brand-logo-black.png" alt="brand-logo">
<img class="navbar-brand__sticky" src="img/brand-logo-black.png" alt="sticky brand-logo">
</a>

<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-inner">

<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Landing Pages</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="index.html">Home - 1</a>
</li>
<li>
<a class="dropdown-item" href="home-2.html">Home - 2</a>
</li>
<li>
<a class="dropdown-item" href="home-3.html">Home - 3</a>
</li>
<li>
<a class="dropdown-item" href="home-4.html">Home - 4</a>
</li>
<li>
<a class="dropdown-item" href="home-5.html">Home - 5</a>
</li>
<li>
<a class="dropdown-item" href="home-6.html">Home-6</a>
</li>
<li>
<a class="dropdown-item" href="home-7.html">Home - 7</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inner-knowledgebase.html">Knowledgebase</a>
</li>
<li>
<a class="dropdown-item" href="inner-faq.html">FAQ</a>
</li>
<li>
<a class="dropdown-item" href="inner-login.html">Login</a>
</li>
<li>
<a class="dropdown-item" href="inner-signup.html">Signup</a>
</li>
<li>
<a class="dropdown-item" href="inner-recover-account.html">Recover Account</a>
</li>
<li>
<a class="dropdown-item" href="inner-coming-soon.html">Coming Soon</a>
</li>
<li>
<a class="dropdown-item" href="inner-404.html">Error 404</a>
</li>
<li>
<a class="dropdown-item" href="inner-maintenance.html">Maintenance</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="javascript:;">Blog Pages</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="blog-grid-2-col.html">Blog Grid 2 Column</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-3-col.html">Blog Grid 3 Column</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-2-col-sidebar-left.html">Blog Sidebar Left</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-2-col-sidebar-right.html">Blog Sidebar right</a>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="javascript:;">Blog Details</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="blog-details-full.html">Blog Details Full</a>
</li>
<li>
<a class="dropdown-item" href="blog-details-sidebar-right.html">Blog Details Sidebar Right</a>
</li>
<li>
<a class="dropdown-item" href="blog-details-sidebar-left.html">Blog Details Sidebar Left</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="http://docs.tunerpixel.com/spacemax/">Documentation</a>
</li>
</ul>

</nav>
</div>
<div class="d-flex align-items-center ml-lg-1 ml-xl-2 mr-4 mr-sm-6 m-lg-0">
<a href="#" class="color--primary font-w--600 mr-2 d-none d-sm-inline-block">Login</a>
<a href="#" class="btn btn-size--md btn-bg--primary rounded--none btn-hover--3d">
<span class="btn__text font-w--500">Purchase now</span>
</a>
</div>
</div>

</header>


<section class="hero hero--v1 d-flex align-items-center hidden">
<div class="section-overlap border-top bg-color--primary-light--1 pos-abs-bottom jsElement" data-height="285"></div>

<div class="container">
<div class="row flex-column-reverse flex-lg-row">
<div class="col-12 col-md-10 col-lg-7 mx-auto text-center z-index2">
<div class="hero-content reveal">
<h1 class="hero__title h2-font font-w--500 mb-2">Begin your journey with a stunning website</h1>
<p class="hero__description text-color--700 opacity--70 font-size--20 mb-3 mb-lg-4">SpaceMax unites beauty and advanced technology to create <br> your stunning website. It’s easy and free.</p>

<a href="#" class="btn btn-size--md rounded--none btn-border btn-border--color--primary color--primary btn-hover--primary">
<span class="btn__text font-w--500">Get Started Now</span>
</a>

</div>

</div>

</div>

<div class="row">
<div class="col-12">
<div class="hero__image jsElement" data-pull="-35">
<picture><img src="img/illustration-25.png" alt="hero-image" class="img-fluid"></picture>
</div>
</div>

</div>

</div>
</section>


<section class="pb-6 pb-lg-10 bg-color--primary-light--1">
<div class="container">
<div class="row">
<div class="col-12 col-sm-9 col-lg-6 mb-4 mb-lg-5 mx-auto text-center reveal">
<div class="section-title">
<h2 class="mb-2 h3-font">Trusted by the world's best</h2>
<p>SpaceMax powers millions of websites across hundreds of industries for people just like you.</p>
</div>
</div>
</div>

<div class="row mb-1">
<div class="col-12 col-lg-9 mx-auto flex-wrap d-flex justify-content-center justify-content-lg-between align-items-center reveal">
<span class="m-2"><img src="img/customer-logo-1.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-2.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-3.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-4.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-5.png" alt="customer-logo"></span>
</div>

</div>

<div class="row">
 <div class="col-12 col-lg-10 mx-auto flex-wrap d-flex justify-content-center justify-content-lg-between align-items-center reveal">
<span class="m-2"><img src="img/customer-logo-6.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-7.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-8.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-9.png" alt="customer-logo"></span>
<span class="m-2"><img src="img/customer-logo-10.png" alt="customer-logo"></span>
</div>

</div>

</div>

</section>


<section class="space reveal">
<div class="container">
<div class="row card--v1">
<div class="col-12 col-md-4 mb-3 mb-md-0">
<div class="card card-hover--shadow p-3 p-md-2 p-lg-4 rounded--none h-100">
<span class="mb-3"><img src="img/icon-device.svg" alt="icon-device"></span>
<h3 class="font-size--20 mb-2">Optimized for Any Device</h3>
<p class="font-size--15">No matter what device it is. Each of our themes is natively responsive, resizing your content and images to fit any device or screen width. You can also adjust them in your way.</p>
</div>
</div>

<div class="col-12 col-md-4 mb-3 mb-md-0">
<div class="card card-hover--shadow p-3 p-md-2 p-lg-4 rounded--none h-100">
<span class="mb-3"><img src="img/icon-assets.svg" alt="icon-assets"></span>
<h3 class="font-size--20 mb-2">Thousands of Fonts & Icons</h3>
<p class="font-size--15">We have thousands of font options included our custom fonts as well as all google fonts. We also have custom icon packs along with icon fonts like font awesome and icofont.</p>
</div>
</div>

<div class="col-12 col-md-4 mb-3 mb-md-0">
<div class="card card-hover--shadow p-3 p-md-2 p-lg-4 rounded--none h-100">
<span class="mb-3"><img src="img/icon-secure.svg" alt="icon-secure"></span>
<h3 class="font-size--20 mb-2">Highly Secured Platform</h3>
<p class="font-size--15">Security on the web was never been easy. SpaceMax protects your data with one of the most advanced encryptions. You never need to worry about security. We will handle everything for you.</p>
</div>
</div>

</div>

<div class="row card--v1 flex-column-reverse flex-md-row">
<div class="col-12 col-md-8 mb-3 mb-md-0">
<div class="card p-3 p-md-2 p-lg-4 pr-lg-10 rounded--none h-100 align-items-start justify-content-center">
<span class="mb-1 text-color--400">No coding skill? No problem!</span>
<h3 class="font-size--26 mb-2">Our platform is fully automated and we have thousands of options for each industry.</h3>
<p class="font-size--15 mb-4">You will never be disappointed at SpaceMax. SpaceMax has a huge template library for each and every industry. Our every single template has everything that you will need for your business. Every template of SpaceMax is unique
with a great UX which will help you to grow up your business.</p>
<a href="#" class="btn btn-size--md btn-bg--dark btn-hover--primary rounded--none"><span class="btn__text font-w--500">See Our Templates</span></a>
</div>
</div>

<div class="col-12 col-md-4 mb-3 mb-md-0">
<div class="card card-hover--shadow p-3 p-md-2 p-lg-4 rounded--none h-100">
<span class="mb-3"><img src="img/icon-ecommerce.svg" alt="icon-ecommerce"></span>
<h3 class="font-size--20 mb-2">e-Commerce Integration</h3>
<p class="font-size--15">Each of our themes is natively supported e-commerce features. The integration is super simple. There are also hundreds of plugins available on our platform for e-commerce.</p>
</div>
</div>

</div>
</div>
</section>


<section class="space bg-color--primary-light--1 hidden">
<div class="background-holder background--top--left">
<img src="img/layout/wave-17.png" alt="wave" class="background-image-holder">
</div>

<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-10 col-lg-5 mx-auto text-center text-lg-left mb-5 reveal">
<h2 class="h3-font mb-2">Pick the theme you love</h2>
<p class="mb-4">Represent your business or ideas in a most beautiful way with our themes. All of our themes are designed and developed by world top designer and developer and every piece of work is unique and made with care.</p>
<a href="#" class="btn btn-size--md rounded--none btn-border btn-border--color--dark text-color--700 btn-hover--primary">
<span class="btn__text font-w--500">Browse All Templates</span>
</a>
</div>

<div class="col-12 col-lg-7">
<div class="carosuel-slider--v1">
<a href="#" class="slide position-relative">
<img src="img/carosuel-slider-img-6.1.png" alt="carosuel-slider-img">
</a>
<a href="#" class="slide">
<img src="img/carosuel-slider-img-6.1.png" alt="carosuel-slider-img">
</a>
<a href="#" class="slide">
<img src="img/carosuel-slider-img-6.1.png" alt="carosuel-slider-img">
</a>
<a href="#" class="slide">
<img src="img/carosuel-slider-img-6.1.png" alt="carosuel-slider-img">
</a>
</div>
</div>

</div>
</div>

</section>


<section class="space--top pb-4 pb-lg-0">
<div class="background-holder background--top mt-5">
<img src="img/layout/bg-overlay-29.png" alt="wave" class="background-image-holder">
</div>

<div class="container">
<div class="row">
<div class="col-12 col-sm-9 col-lg-7 col-xl-6 mb-5 mb-lg-8 mx-auto text-center reveal">
<div class="section-title">
 <h2 class="mb-2 h3-font">See what our customers have <br> made using our platform</h2>
<p class="mb-4">Over a million companies use SpaceMax to make their dream website concepts come visible. See some examples below.</p>
<a href="#" class="btn btn-size--md rounded--none btn-border btn-border--color--dark text-color--700 btn-hover--primary">
<span class="btn__text font-w--500">Be part of this Family</span>
</a>
</div>
</div>
</div>

<div class="row">
<div class="col-12 col-lg-9 mx-auto">
<div class="customer-website z-index2" data-simplebar="init" data-simplebar-auto-hide="false">
<div class="row">
<div class="col-12 col-md-6 mb-3 px-1">
<div class="customer-website-item position-relative text-center">
<div class="item-description pos-abs-top-left bg-color--dark--1 w-100 h-100 d-flex align-items-center justify-content-center flex-column p-2">
<h1 class="font-size--26 color--white mb-1">BuilderPro</h1>
<p class="mb-3 color--white opacity--80">Finding the perfect learning tool for Flash is a daunting task to any novice web developer.</p>
<a href="#" class="btn btn-size--sm rounded--none btn-border btn-border--color--light color--white btn-hover--primary">
<span class="btn__text font-w--500">Preview</span>
</a>
</div>
<span>
<img src="img/customer-website-1.jpg" alt="customer-website" class="img-fluid">
</span>
</div>

</div>

<div class="col-12 col-md-6 mb-3 px-1">
<div class="customer-website-item position-relative text-center">
<div class="item-description pos-abs-top-left bg-color--dark--1 w-100 h-100 d-flex align-items-center justify-content-center flex-column p-2">
<h1 class="font-size--26 color--white mb-1">Yoga Fresh</h1>
<p class="mb-3 color--white opacity--80">Finding the perfect learning tool for Flash is a daunting task to any novice web developer.</p>
<a href="#" class="btn btn-size--sm rounded--none btn-border btn-border--color--light color--white btn-hover--primary">
<span class="btn__text font-w--500">Preview</span>
</a>
</div>
<span>
<img src="img/customer-website-2.jpg" alt="customer-website" class="img-fluid">
</span>
</div>

</div>

<div class="col-12 col-md-6 mb-3 px-1">
<div class="customer-website-item position-relative text-center">
<div class="item-description pos-abs-top-left bg-color--dark--1 w-100 h-100 d-flex align-items-center justify-content-center flex-column p-2">
<h1 class="font-size--26 color--white mb-1">BuilderPro</h1>
<p class="mb-3 color--white opacity--80">Finding the perfect learning tool for Flash is a daunting task to any novice web developer.</p>
<a href="#" class="btn btn-size--sm rounded--none btn-border btn-border--color--light color--white btn-hover--primary">
<span class="btn__text font-w--500">Preview</span>
</a>
</div>
<span>
<img src="img/customer-website-3.jpg" alt="customer-website" class="img-fluid">
</span>
</div>

</div>

<div class="col-12 col-md-6 mb-3 px-1">
<div class="customer-website-item position-relative text-center">
<div class="item-description pos-abs-top-left bg-color--dark--1 w-100 h-100 d-flex align-items-center justify-content-center flex-column p-2">
<h1 class="font-size--26 color--white mb-1">Yoga Fresh</h1>
<p class="mb-3 color--white opacity--80">Finding the perfect learning tool for Flash is a daunting task to any novice web developer.</p>
<a href="#" class="btn btn-size--sm rounded--none btn-border btn-border--color--light color--white btn-hover--primary">
<span class="btn__text font-w--500">Preview</span>
</a>
</div>
<span>
<img src="img/customer-website-4.jpg" alt="customer-website" class="img-fluid">
</span>
</div>

</div>

</div>

</div>
</div>

</div>

</div>

</section>


<section class="space bg-color--primary-light--1 testimonials--v1 jsElement" data-pull="-130">
<div class="svg-shape--top w-100 z-index1">
<img src="img/layout/wave-18.svg" alt="wave" class="svg w-100 ">
</div>

<div class="background-holder background--top--left">
<img src="img/layout/wave-20.svg" alt="wave" class="background-image-holder h-100">
</div>

<div class="container pt-10">
<div class="row align-items-center">
<div class="col-12 col-md-10 col-lg-5 mb-5 mb-lg-0 mx-md-auto mx-lg-0 text-center text-lg-left reveal">
<h2 class="h3-font mb-2">Stories from our <br>valueable customers</h2>
<p class="mb-5">Over 44,306 people and businesses have come to us for their websites. Read their reviews of SpaceMax to learn how great website changed their world.</p>
<a href="#" class="btn btn-size--md rounded--none btn-bg--primary btn-hover--3d">
<span class="btn__text font-w--500">Read All Reviews</span>
</a>
</div>

<div class="col-12 col-md-10 col-lg-7 mb-6 mb-lg-0 mx-md-auto mx-lg-0">
<div class="carosuel-slider--v2 bg-white box-shadow--5 p-3 py-lg-5 pl-lg-4 pr-lg-10">
<div class="slide">
<div class="d-flex align-items-start mb-2">
<span class="mr-2 rounded--full"><img src="img/avatar-1.png" class="rounded--full" alt="avatar"></span>
<div class="d-flex flex-column">
<span class="client-name font-size--10 font-w--600">Loretta Paul</span>
<span class="font-size--15 text-color--400 mb-1">Co-Founder at Geekpixel</span>
<div class="color--orange font-size--15">
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate-half"></i>
</div>
</div>
</div>
<div class="position-relative z-index1 pt-2">
<span class="pos-abs-top-left testimonial__quote mr-3 font-size--30 opacity--10 z-index-1"><i class="icon icon-quote-2"></i></span>
<blockquote class="blockquote font-size--17">This process was so easy and quick. I'm so glad we were referred to this program. If we had gone the traditional route we would have spent much more and would have been limited one design ideas/interpretation. Extremely
pleased with how this turned out!</blockquote>
<a href="#" class="color--primary"><u>See the website</u></a>
</div>
</div>

<div class="slide">
<div class="d-flex align-items-start mb-2">
<span class="mr-2 rounded--full"><img src="img/avatar-2.png" class="rounded--full" alt="avatar"></span>
<div class="d-flex flex-column">
<span class="client-name font-size--10 font-w--600">Jimmy Griffin</span>
<span class="font-size--15 text-color--400 mb-1">Themeforest</span>
<div class="color--orange font-size--15">
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate-half"></i>
</div>
</div>
</div>
<div class="position-relative z-index1 pt-2">
<span class="pos-abs-top-left testimonial__quote mr-3 font-size--30 opacity--10 z-index-1"><i class="icon icon-quote-2"></i></span>
<blockquote class="blockquote font-size--17">This process was so easy and quick. I'm so glad we were referred to this program. If we had gone the traditional route we would have spent much more and would have been limited one design ideas/interpretation. Extremely
pleased with how this turned out!</blockquote>
<a href="#" class="color--primary"><u>See the website</u></a>
</div>
</div>

<div class="slide">
<div class="d-flex align-items-start mb-2">
<span class="mr-2 rounded--full"><img src="img/avatar-3.png" class="rounded--full" alt="avatar"></span>
<div class="d-flex flex-column">
<span class="client-name font-size--10 font-w--600">Alan Rogers</span>
<span class="font-size--15 text-color--400 mb-1">Themeforest</span>
<div class="color--orange font-size--15">
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate"></i>
<i class="icon icon-star-rate-half"></i>
</div>
</div>
</div>
<div class="position-relative z-index1 pt-2">
<span class="pos-abs-top-left testimonial__quote mr-3 font-size--30 opacity--10 z-index-1"><i class="icon icon-quote-2"></i></span>
<blockquote class="blockquote font-size--17">This process was so easy and quick. I'm so glad we were referred to this program. If we had gone the traditional route we would have spent much more and would have been limited one design ideas/interpretation. Extremely
pleased with how this turned out!</blockquote>
<a href="#" class="color--primary"><u>See the website</u></a>
</div>
</div>

</div>
</div>
</div>
</div>
</section>


<section class="space">
<div class="container">
<div class="row pb-7 flex-column-reverse flex-lg-row-reverse align-items-center text-center justify-content-between">
<div class="col-12 col-md-10 col-lg-6 col-xl-5 d-lg-block text-lg-left mt-9 mt-lg-6 reveal">
<h2 class="h3-font mb-2">The features you need for your website</h2>
<p class="mb-4">Create a free website that looks exactly the way you want. With our website builder, you get beautiful galleries, professional image collections, secure hosting, personalized domains, the best SEO and so much more.</p>
<a href="#" class="btn btn-size--md rounded--none btn-border btn-border--color--dark text-color--700 btn-hover--primary">
<span class="btn__text font-w--500">Get Started Now</span>
</a>
</div>

<div class="col-12 col-lg-5 col-xl-6">
<picture class="overlap-image__main">
<img class="img-fluid box-shadow--5" src="img/content-block-img-1.1.png" alt="content-block-img">
</picture>
<picture class="overlap-image__secondary pos-abs-bottom-right">
<img class="img-fluid box-shadow--5" src="img/content-block-img-1.2.png" alt="content-block-img">
</picture>
</div>

</div>

<div class="row mt-lg-10 flex-column-reverse flex-lg-row align-items-center text-center justify-content-between">
<div class="col-12 col-md-10 col-lg-6 col-xl-5 d-lg-block text-lg-left mt-6 mt-lg-6 reveal">
<h2 class="h3-font mb-2">Reach and grow your audience</h2>
<p class="mb-4">Our all-in-one platform gives you everything you need to run your business. Whether you’re just getting started or are an established brand, our powerful platform helps your business grow.
<br>
<br> We provide you with a comprehensive set of marketing tools to engage with your audience.</p>
<a href="#" class="btn btn-size--md rounded--none btn-border btn-border--color--dark text-color--700 btn-hover--primary">
<span class="btn__text font-w--500">Get Started Now</span>
</a>
</div>

<div class="col-12 col-lg-5 col-xl-6">
<picture class="overlap-image__main text-right">
<img class="img-fluid box-shadow--5 w-85" src="img/content-block-img-2.1.png" alt="content-block-img">
</picture>
<picture class="overlap-image__secondary pos-abs-vertical-center pos-abs-left">
<img class="img-fluid box-shadow--5" src="img/content-block-img-2.2.png" alt="content-block-img">
</picture>
</div>

</div>

</div>
</section>


<section class="space bg-color--primary-light--1">
<div class="background-holder background--bottom opacity--08">
<img src="img/layout/city.svg" alt="wave" class="background-image-holder">
</div>

<div class="container">
<div class="row">
<div class="col-12 col-lg-7 text-center mx-auto pb-8 reveal">
<div class="section-title">
<h2 class="h3-font mb-3">We’ve got you covered</h2>
<p class="mb-4">Think of SpaceMax as your very own IT department, with free, unlimited hosting, top-of-the-line security, an enterprise-grade infrastructure, and around-the-clock support. Get personalized support from our Customer Care Team via
email or live chat, or join a live webinar. Reach out any time — we’re here 24/7.</p>
<a href="#" class="btn btn-bg--primary btn-size--md rounded--none btn-hover--3d"><span class="btn__text font-w--500">Visit Help Center</span></a>
</div>
</div>
</div>
</div>
</section>


<section class="space--bottom border--bottom jsElement" data-pull="-80">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-xl-9 mx-auto">
<div class="newsletter-form form--v8 bg-white py-6 py-lg-8 box-shadow--5 text-center">
<div class="mb-5 px-3 reveal">
<h2 class="h3-font mb-1">Start building your website now</h2>
 <p>Just sign up and choose a theme from out library to get started</p>
</div>

<div class="col-12 col-md-10 col-lg-8 mx-md-auto reveal">
<form action="#" class="form bg-color--white-opacity--10 rounded--05 p-1">
<div class="input-group d-flex">
<input type="email" class="form-control rounded--none" placeholder="Enter your email" required>
<button class="btn btn-hover--splash btn-bg--primary rounded--none" type="submit"><span class="btn__text font-w--500">Get Started</span></button>
</div>
</form>

</div>
</div>
</div>

</div>

</div>

</section>



<div class="height-emulator d-none d-lg-block"></div>


<footer class="space footer footer--fixed section--light hidden">
<div class="container">
<div class="row">
<div class="col-12 col-md-9 col-lg-4 mb-4 mb-xl-0">
<div class="pr-xl-3">
<span class="mb-3">
<img src="img/brand-logo-black.png" alt="brand-logo">
</span>
<p class="mb-1">The main objectives of the project are to meet the needs of cryptocurrency projects and users, and to provide access to investment product.</p>
<p>© SpaceMax, 2018.</p>
<br>
<ul class="icon-group mb-0">
<li><a href="#" class="text-color--700"><i class="fab fa-medium-m"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-telegram-plane"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-youtube"></i></a></li>
<li><a href="#" class="text-color--700"><i class="fab fa-pinterest"></i></a></li>
</ul>
</div>
</div>

<div class="col-6 col-md-4 col-lg-4 col-xl-2 mb-2 mb-xl-0">
<div class="widget widget-nav">
<span class="widget__title font-size--20 font-w--700 mb-1">Products</span>
<ul>
<li><a href="#">Domain Name</a></li>
<li><a href="#">Websites</a></li>
<li><a href="#">Online Stores</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Logos</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Features</a></li>
</ul>
</div>
 </div>

<div class="col-6 col-md-4 col-lg-4 col-xl-2 offset-xl-1 mb-2 mb-xl-0">
<div class="widget widget-nav">
<span class="widget__title font-size--20 font-w--700 mb-1">Company</span>
<ul>
<li><a href="#">About SpaceMax</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Design Assets</a></li>
<li><a href="#">App Market Terms</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

<div class="col-6 col-md-4 col-lg-4 col-xl-2 offset-xl-1 mb-2 mb-xl-0">
<div class="widget widget-nav">
<span class="widget__title font-size--20 font-w--700 mb-1">Support</span>
<ul>
<li><a href="#">SpaceMax Blog</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Workshops</a></li>
</ul>
</div>
</div>

</div>
</div>
</footer>

</main>
<script src="js/plugins.min.js"></script>
<script src="js/app.js"></script>
</body>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-125821150-2');
</script>
</html>